<template>
    <div>
        <div v-if="true">
            <el-button>返回列表</el-button>
            <div style="height:36px;line-height:36px;margin:21px 0">新增/编辑虚拟机</div>

            <el-form :model="tempDetail" label-position="top" :inline="true" :label-width="formLabelWidth" ref="tempDetail">
                <el-row>
                    <el-col :span="5">
                        <el-form-item label="虚拟机主机名键" prop="basic.dictKey" :rules="[{ required: true, message: '请输入键值', trigger: 'blur' }]">
                            <el-input v-model="tempDetail.basic.dictKey" auto-complete="off" :style="inputWidthDown" :maxlength="maxlength2"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="5">
                        <el-form-item label="操作系统" prop="basic.dictValue" :rules="[{ required: true, message: '请输入键值', trigger: 'blur' }]">
                            <el-input v-model="tempDetail.basic.dictValue" auto-complete="off" :style="inputWidthDown" :maxlength="maxlength2"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="5">
                        <el-form-item label="CPU核数">
                            <el-input v-model="tempDetail.basic.dictDescribe" auto-complete="off" :style="inputWidthDown" :maxlength="maxlength2"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="5">
                        <el-form-item label="内存大小" prop="basic.orderNum" :rules="[{ required: true, message: '请输入序号' } ,{ type: 'number', message: '请输入数字' }]">
                            <el-input v-model.number="tempDetail.basic.orderNum" auto-complete="off" :style="inputWidthDown"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="5">
                        <span>硬盘宿主物理机</span>
                    </el-col>
                    <el-col :span="5">
                        <span>硬盘大小</span>
                    </el-col>
                </el-row>
                <el-row v-for="(item, index) in tempDetail.add" :key="item.key">
                    <el-col :span="5">
                        <el-form-item class="postInfo-container-item" :prop="'add.' + index + '.dictKey'" :rules="[{ required: true, message: '请输入键值', trigger: 'blur' }]">
                            <el-input v-model="item.dictKey" auto-complete="off" :style="inputWidthDown" :maxlength="maxlength2"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="5">
                        <el-form-item class="postInfo-container-item" :prop="'add.' + index + '.dictValue'" :rules="[{ required: true, message: '请输入键值', trigger: 'blur' }]">
                            <el-input v-model="item.dictValue" auto-complete="off" :style="inputWidthDown" :maxlength="maxlength2"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="3">
                        <el-form-item>
                            <el-button @click="deleteKeyVal(index)">删除硬盘</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-button>添加硬盘</el-button>

                <el-row>
                    <el-col :span="5">
                        <span>网卡名称</span>
                    </el-col>
                    <el-col :span="5">
                        <span>IP地址</span>
                    </el-col>
                </el-row>
                <el-row v-for="(item, index) in tempDetail.add" :key="item.key">
                    <el-col :span="5">
                        <el-form-item class="postInfo-container-item" :prop="'add.' + index + '.dictKey'" :rules="[{ required: true, message: '请输入键值', trigger: 'blur' }]">
                            <el-input v-model="item.dictKey" auto-complete="off" :style="inputWidthDown" :maxlength="maxlength2"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="5">
                        <el-form-item class="postInfo-container-item" :prop="'add.' + index + '.dictValue'" :rules="[{ required: true, message: '请输入键值', trigger: 'blur' }]">
                            <el-input v-model="item.dictValue" auto-complete="off" :style="inputWidthDown" :maxlength="maxlength2"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="3">
                        <el-form-item>
                            <el-button @click="deleteKeyVal(index)">分配IP</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <el-form-item>
                            <el-radio class="radio" v-model="radio" label="1">管理IP</el-radio>
                        </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <el-form-item>
                            <el-button @click="deleteKeyVal(index)">删除网卡</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-button>添加网卡</el-button>
            </el-form>
            <div>
                <el-button>取 消</el-button>
                <el-button type="primary">确 定</el-button>
            </div>
        </div>

        <!-- dialog编辑框 -->
        <el-dialog title="选择IP地址" size="small" :visible.sync="cabinetEditVisible" v-if="false">
            <el-row>
                <el-col :span="5">
                    <el-select v-model="cabinetParams.roomId" placeholder="IP分类" :style="inputWidth">
                        <el-option v-for="list in roomListData" :key="list.roomId" :label="list.roomName" :value="list.roomId.toString()"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="5">
                    <el-select v-model="cabinetParams.roomId" placeholder="所属网段" :style="inputWidth">
                        <el-option v-for="list in roomListData" :key="list.roomId" :label="list.roomName" :value="list.roomId.toString()"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="5">
                    <el-button type="primary">筛选结果</el-button>
                </el-col>
            </el-row>
            <el-table :data="infos.pageData" border style="width: 100%;margin:20px 0">
                <el-table-column label="选中" min-width="50px">
                    <template scope="scope">
                        <span>
                            <el-radio class="radio" v-model="radio" label="1">备选项</el-radio>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="IP类型" min-width="180px">
                    <template scope="scope">
                        <span>{{ scope.row.areaName+'-'+scope.row.countryName+'-'+scope.row.provinceName+'-'+scope.row.cityName}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="IP网段" min-width="130px">
                    <template scope="scope">
                        <span>{{scope.row.roomName}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="IP地址" min-width="130px">
                    <template scope="scope">
                        <span>{{ scope.row.cabinetCode }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页条 -->
            <div class="block">
                <el-pagination style="padding:0;" @current-change="handleCurrentChange" :current-page.sync="pageConfig.curPage" :page-size="pageConfig.size" layout="total, prev, pager, next, jumper" :total="pageConfig.total">
                </el-pagination>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cabinetEditVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('cabinetParams',cabinetParams.type)">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>
<style>
</style>
<script>
    export default {

    }
</script>